The xhtml theme is the default theme in WebWork. It provides all the basics that the simple theme provides, plus these additional features:

Wrapping the Simple Theme

The xhtml theme uses the wrapping technique mentioned in Extending Themes. As such, it is important to understand how the HTML tags are wrapped by a standard header and footer. For example, take a look at the textfield template, text.ftl:

<#include "/${parameters.templateDir}/${parameters.theme}/controlheader.ftl" />
<#include "/${parameters.templateDir}/simple/text.ftl" />
<#include "/${parameters.templateDir}/xhtml/controlfooter.ftl" />

As you can see, the controlheader.ftl and controlfooter.ftl templates are wrapped around the simple template. In case you are wondering, the reason the controlheader.ftl is refered using ${parameters.theme} is to assist with code re-use for the ajax theme. For now, assume that the xhtml theme is used there as well.

XHTML Theme Header

Now let's look at the controlheader.ftl and controlheader-core.ftl (again, these are split up for easy re-use with the ajax theme) contents:

<#include "/${parameters.templateDir}/xhtml/controlheader-core.ftl" />
    <td>
<#--
	Only show message if errors are available.
	This will be done if ActionSupport is used.
-->
<#assign hasFieldErrors = parameters.name?exists && fieldErrors?exists && fieldErrors[parameters.name]?exists/>
<#if hasFieldErrors>
<#list fieldErrors[parameters.name] as error>
<tr errorFor="${parameters.id}">
<#if parameters.labelposition?default("") == 'top'>
    <td align="left" valign="top" colspan="2"><#rt/>
<#else>
    <td align="center" valign="top" colspan="2"><#rt/>
</#if>
        <span class="errorMessage">${error?html}</span><#t/>
    </td><#lt/>
</tr>
</#list>
</#if>
<#--
	if the label position is top,
	then give the label it's own row in the table
-->
<tr>
<#if parameters.labelposition?default("") == 'top'>
    <td align="left" valign="top" ><#rt/>
<#else>
    <td class="tdLabel"><#rt/>
</#if>
<#if parameters.label?exists>
    <label <#t/>
<#if parameters.id?exists>
        for="${parameters.id?html}" <#t/>
</#if>
<#if hasFieldErrors>
        class="errorLabel"<#t/>
<#else>
        class="label"<#t/>
</#if>
    ><#t/>
<#if parameters.required?default(false) && parameters.requiredposition?default("right") != 'right'>
        <span class="required">*</span><#t/>
</#if>
${parameters.label?html}<#t/>
<#if parameters.required?default(false) && parameters.requiredposition?default("right") == 'right'>
 <span class="required">*</span><#t/>
</#if>
:<#t/>
<#include "/${parameters.templateDir}/xhtml/tooltip.ftl" /> 
</label><#t/>
</#if>
    </td><#lt/>
<#-- add the extra row -->
<#if parameters.labelposition?default("") == 'top'>
</tr>
<tr>
</#if>

The header used by the HTML tags in the xhtml theme is somewhat complex. However, if you look closely you will see that the logic produces two behaviors: either a two-column format or a two-row format. Generally the two-column approach is what you want, so that is the default option. However, you can use the two-row approach by changing the labelposition parameter to "top".

Also note that the fieldErrors, usually caused by Validation, are printed out as a row above the HTML form element. Some people prefer these errors elsewhere, such as in a third column. If you wish to place these elsehwere, overriding the headers is easy, allowing you to continue to use the other features provided by this theme. See Template Loading for more information on how to do this.

XHTML Theme Footer

And the controlfooter.ftl contents:

${parameters.after?if_exists}<#t/>
    </td><#lt/>
</tr>

The important thing to note here is that the table cell and row is closed. Before that, however, note that a special after parameter is checked for. While this isn't an official attribute suppotred by any of the Tags, if you are using FreeMarker Tags, Velocity Tags, or the param tag in any template language, you can add an after parameter to place any content you like after the simple theme template renders. This makes it easier to fine-tune your HTML forms as you please.

Special Notes

While most of the templates in this theme are self explanatory, there are some templates that should be called out and explained in detail: